<template>

  <dv-border-box-8 style="padding: 10px">
    <div style="height: 500px;width: 100%;">
      <div class="number" style="margin-top: 10px">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>今年累计销售额</span>
            <h2>{{ saleData.yearTotal }}</h2>
          </el-col>
          <el-col :span="8">
            <span>本月累计销售额</span>
            <h2>{{ saleData.monthTotal }}</h2>
          </el-col>
          <el-col :span="8">
            <span>今日累计销售额</span>
            <h2>{{ saleData.todayTotal }}</h2>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>本年累计碳排放</span>
            <h2>{{ carbonData.totalCarbonEmissionByYear }}</h2>
          </el-col>
          <el-col :span="8">
            <span>本月累计碳排放</span>
            <h2>{{ carbonData.totalCarbonEmissionByMonth }}</h2>
          </el-col>
          <el-col :span="8">
            <span>今日累计碳排放</span>
            <h2>{{ carbonData.totalCarbonEmissionByDay }}</h2>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table :data="tableData"  :row-style="rowStyle"  class="overTable">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="deviceName" label="设备"></el-table-column>
          <el-table-column prop="producedQuantity" label="生产数量"></el-table-column>
          <el-table-column prop="totalCarbonEmission" label="碳排放"></el-table-column>
        </el-table>
      </div>
    </div>
  </dv-border-box-8>


</template>

<script>


export default {
  name: "Overview",
  data() {
    return {
      interval: '',
      rowStyle: {
        color: '#eee',
        fontSize: '12px',
        height: '14px'
      },
      saleData: {},
      carbonData: {
        yearTotal: 0,
        monthTotal: 0,
        todayTotal: 0,
        totalCarbonEmissionByYear: 0,
        totalCarbonEmissionByMonth: 0,
        totalCarbonEmissionByDay: 0,
      },
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // 销售数据静态化
      this.saleData = {
        yearTotal: '1,200,000',
        monthTotal: '300,000',
        todayTotal: '10,000'
      };

      // 碳排放数据静态化
      this.carbonData = {
        totalCarbonEmissionByYear: '500,000',
        totalCarbonEmissionByMonth: '150,000',
        totalCarbonEmissionByDay: '5,000'
      };

      // 设备数据静态化
      this.tableData = [
        { deviceName: '注塑机', producedQuantity: 1200, totalCarbonEmission: 12000 },
        { deviceName: '冲压机', producedQuantity: 800, totalCarbonEmission: 9800 },
        { deviceName: '组装线', producedQuantity: 2500, totalCarbonEmission: 8500 },
        { deviceName: '包装机', producedQuantity: 1500, totalCarbonEmission: 6800 }
      ];
    }
  },
}
</script>

<style lang="scss">
.number span {
  font-size: 14px;
}

h2 {
  color: #1ab394;
  line-height: 1px;
  font-size: 16px;
}

/*最外层透明*/
.overTable {
  background-color: transparent;

  th.el-table__cell {
    color: #eee;
    background-color: transparent;
  }

  tr:hover {
    color: #3E9EFF !important;
  }
}

.el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
.overTable th,
.overTable tr,
.overTable td {
  background-color: transparent;
}
</style>
